<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            width: 560px;
            line-height: 40px;
            background-color: #000;
            color: #fff;
            margin: auto;
        }
        li{
            width: 80px;
            text-align: center;
        }

    </style>
</head>
<body>

    <ul>
        <li>星期一</li>
        <li>星期er</li>
        <li>星期三</li>
        <li>星期四</li>
        <li>星期五</li>
        <li>星期六</li>
        <li>星期天</li>
    </ul>
    <ul id="list"></ul>


    <script>

        // 分析日历
        //   上个月的部分天数 + 本月所有的天数 + 下一个的天数  = 42
        //   三个数组  



        // 求本月的天数
        function getNowDays() {
            var date = new Date() ;
            // 月份推到下个月
            date.setDate(32) ;
            // 日期推到弟0天
            date.setDate(0) ;
            var maxDay = date.getDate() ;
            var arr = [] ;
            for(var i = 1 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }


        // var res = getNowDays() ;
        // console.log(res);


        // 求上个月的天数
        function getPrevDays() {
            var date = new Date() ;

            // 算出本月的第一天是星期几？
            date.setDate(1) ;
            var week = date.getDay() ;
            console.log(week);

            // 日期设置到第0天
            date.setDate(0) ;
            var maxDay = date.getDate() ;

            var arr = [] ;
            // 上个月所显示的第一天 = 上个月的最后一天 - week + 2
            for(var i = maxDay - week + 2 ; i <= maxDay ; i++) {
                arr.push(i) ;
            }
            return arr
        }

        // getPrevDays();



        function getNextDays() {
            // 上个月的天数
            var arr1 = getPrevDays() ;
            var arr2 = getNowDays() ;
            console.log(arr1 , arr2);

            var arr = [] ;
            for(var i = 1 ; i <= 42 - arr1.length - arr2.length ; i++) {
                arr.push(i) ;
            } 
            // console.log(arr);
            return arr
        }


       var arr1 = getPrevDays() ;
       var arr2 = getNowDays() ;
       var arr3 = getNextDays() ;

       
       
        
        var html = '' ;
        for(var i in arr1) {
            html += `<li style="color:gray;">${arr1[i]}</li>`
        }
        for(var i in arr2) {
            html += `<li style="color:red;">${arr2[i]}</li>`
        }
        for(var i in arr3) {
            html += `<li style="color:gray;">${arr3[i]}</li>`
        }

        var oUl = document.getElementById('list') ;
        oUl.innerHTML = html ;

    </script>
    
</body>
</html>